import Vue from 'vue'
import VueRouter from 'vue-router'

// 把路由当成是插件引入进来
Vue.use(VueRouter)

// 把路由的组件给导入进来
// 因为路由表象是，不同的路径显示不同的页面
// 所以我们把不同页面定义成不同的组件

import Index from '../views/Index.vue'
import Mall from '../views/Mall.vue'
import Home from '../views/mall/Home.vue'


// import Page404 from '../views/Page404.vue'
// import About from '../views/mall/About.vue'
// import Intro from '../views/mall/Intro.vue'
// import Products from '../views/mall/Products.vue'
// import Detail from '../views/Detail.vue'
// import My from '../views/My.vue'

// 定义路由表
const routes = [
  {
    path: '/',
    redirect: '/index/mall'
  },
  {
    path: '/index',
    component: Index,
    name: 'index',
    redirect: '/index/mall',
    children: [
      {
        path: 'mall',
        component: Mall,
        redirect: 'mall/home',
        name: 'mall',
        children: [
          {
            path: 'home',
            name: 'home',
            component: Home
          },
          {
            path: 'about',
            name: 'about',
            components: {
              default: () => import('../views/mall/About.vue'),
              intro: () => import('../views/mall/Intro.vue')
            },
            props: {
              default: true,
              intro: false
            }
          },
          {
            path: 'products/:id',
            name: 'products',
            component: () => import('../views/mall/Products.vue'),
            props: true
          }
        ]
      },
      {
        path: 'my',
        name: 'my',
        component: () => import('../views/My.vue'),
        // beforeEnter(to, from, next) {
        //   console.log(from)
        //   next()
        // }
      },
    ]
  },
  {
    path: '/detail',
    name: 'detail',
    component: () => import(/* webpackChunkName: "detail-module" */ '../views/Detail.vue'),
    props: (route) => {
      return {
        x: 100,
        y: route.fullPath
      }
    },
    meta: {
      a: 100,
      b: {
        x: 1000
      }
    }
  },
  {
    path: '*',
    component: () => import('../views/Page404.vue')
  }
]

// 声明一个路由的实例
const router = new VueRouter({
  mode: 'hash',
  routes
})

// router.beforeEach((to, from, next) => {
//   console.log(100)
//   next()
// })

// router.afterEach((to, from) => {
//   console.log(100)
// })

export default router